<template>
    <div class="box_Trend">
        <MoodalTitle :title="'重复问题发生趋势'" />
        <div id="Trend" class="Occurring">
    
        </div>
    </div>
</template>

<script>
import MoodalTitle from '@/components/ModalTitle/Index.vue'
import {ZongHeZhiFaDB} from '@/api/zhangzi/index'
export default {
    components: {
        MoodalTitle
    },
    data() {
        return {
            XDataIX:[],
            dataIY:[]
        }
    },
    mounted() {
       
        ZongHeZhiFaDB.getDupliTrend().then(res=>{
                console.log(res,'重复问题发生趋势');
                if(res.code == 200){
                    res.data.forEach(item => {
                        return this.XDataIX.push(item.title),
                        this.dataIY.push(item.num)
                    })
                    console.log(this.XDataIX,'1111');
                    console.log(this.dataIY,'222')
                    this.functionTrend(this.XDataIX,this.dataIY)
                }
            })
    },
    methods: {
        functionTrend(XDataIX,dataIY) {
            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(document.querySelector('#Trend'))
            // ['9.1', '13', '14', '15', '16', '17', '18'] [0, 20, 100, 86, 151, 131, 118]
            let XData = XDataIX
            let valueData = {
                data1: dataIY,
            }
           let option = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    color: ["#F58080", "#47D8BE", "#F9A589"],
                    right: '2%',
                    top: '2%'
                },
                // 控制网格
                grid: {
                    top: 'middle',
                    left: '1%',
                    right: '0%',
                    bottom: '1%',
                    height: '80%',
                    containLabel: true
                },
                xAxis:{
                    gridIndex: 0,
                    type: 'category', 
                    data: XData,
                    show:true, //坐标轴线
                    // 坐标轴线
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#fff',
                        }
                    },
                    // 坐标轴线刻度线
                    axisTick: {
                        show: false // 刻度线
                    },
                    // 坐标轴线文字
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: "#fff"
                        }
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: 'rgba(185, 200, 218, 1)',
                        }
                    },
                },
                legend:{
                    textStyle: {
                        color: '#fff',
                        fontSize: "1.2rem"
                    }
                },
                yAxis: [{
                    type: 'value',
                    show:true, //坐标轴线
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: "#fff"  //数字
                        }
                    },
                    // 控制网格数字
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: '#DEDEDE'
                        }
                    },
                    axisTick: {
                        show: false // 刻度线
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type:'dashed',
                            opacity:0.2
                        }
                    },
                }
                ],
                // 头顶标题
                series: [{
                    name: '数量',
                    type: 'line',
                    data: valueData.data1,
                    color: "rgba(112, 119, 242, 1)",
                    symbol: "circle", //标记的图形为实心圆
                    symbolSize: 9, //标记的大小
                    lineStyle: {
                        normal: {
                            width: 2,
                            color: {
                                type: 'linear',
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(112, 119, 242, 1)' // 0% 处的颜色
                                }, {
                                    offset: 0.4,
                                    color: 'rgba(112, 119, 242, 1)' // 100% 处的颜色
                                }, {
                                    offset: 1,
                                    color: 'rgba(112, 119, 242, 1)' // 100% 处的颜色
                                }],
                                globalCoord: false // 缺省为 false
                            },
                            shadowColor: 'rgba(112, 119, 242, 0.5)',
                            shadowBlur: 10,
                            shadowOffsetY: 7
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(112, 119, 242, 1)',
                        }
                    },
                    emphasis: {
                        // 鼠标hover上去的时候，拐点的颜色和样式
                        itemStyle: {
                            color: 'rgba(129, 135, 244, 1)', //颜色
                            borderColor: '#fff', //图形的描边颜色
                            borderWidth: 2, // 描边的线宽
                            shadowBlur: 4, // 图形的阴影大小
                            shadowColor: 'rgba(129, 135, 244, 1)', // 图形的阴影颜色
                        },
                    },
                    smooth: false
                },
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
    }
}
</script>

<style lang="less" scoped>
.box_Trend {
    width: 100%;
    height: 28.4rem !important;
    margin-top: 1.6rem;
}

.Occurring {
    width: 45rem;
    height: 22.4rem
}
</style>